import { useReactive } from "ahooks";
import { useModel, Outlet } from "umi";
import { Layout, Nav } from "@douyinfe/semi-ui";
import { IconSearch } from "@douyinfe/semi-icons";
import { AutoComplete, Input } from "antd";

import PageLeftMenu from "../components/left.menu";

import { SearchPersonByRealName } from "../_graphql/persons";

const { Content } = Layout;

const PlatformLayout = () => {
    const { currentPersonRealName, setCurrentPerson } = useModel("person.info");
    const { graphqlFetchPlatform } = useModel("global");

    const state = useReactive({
        leftSiderWidth: 160,
        persons: [],
        selectOptions: [],
    });

    const loadPersonInformation = async (keyword) => {
        let res = await graphqlFetchPlatform({ query: SearchPersonByRealName, variables: { keyword } });
        return res?.a?.nodes || [];
    };

    return (
        <Layout style={{ position: "fixed", left: 0, top: 93, width: state.leftSiderWidth, bottom: 0, right: 0 }}>
            <PageLeftMenu onChangeLeftSiderWidth={(newWidth) => (state.leftSiderWidth = newWidth)} />
            <Content id="main-body" style={{ backgroundColor: "var(--semi-color-fill-0)", position: "fixed", left: state.leftSiderWidth, top: 93, right: 0, bottom: 0 }}>
                <Nav mode="horizontal">
                    <Nav.Header text={currentPersonRealName || "-"}></Nav.Header>
                    <Nav.Footer>
                        <AutoComplete
                            options={state.selectOptions}
                            prefix={<IconSearch />}
                            onSearch={async (inputValue) => {
                                let value = inputValue.replace(/\s/g, "");
                                if (value) {
                                    let res = await loadPersonInformation(value);
                                    if (res.length > 0) {
                                        state.selectOptions = res.map((item) => ({
                                            uuid: item.uuid,
                                            value: item.realName,
                                            label: item.realName,
                                        }));
                                    }
                                } else {
                                    state.selectOptions = [];
                                }
                            }}
                            onSelect={(info, option) => {
                                setCurrentPerson(option.uuid, option.value);
                                state.selectOptions = [];
                            }}
                            filterOption={(inputValue, option) => option.value.indexOf(inputValue) !== -1}
                            style={{ width: 300 }}
                        >
                            <Input.Search placeholder="输入个人姓名" enterButton />
                        </AutoComplete>

                        {/* <AutoComplete
                            showClear
                            data={state.selectOptions}
                            style={{ width: 300 }}
                            prefix={<IconSearch />}
                            onSearch={async (inputValue) => {
                                let value = inputValue.replace(/\s/g, "");
                                if (value) {
                                    let res = await loadPersonInformation(value);
                                    if (res.length > 0) {
                                        state.selectOptions = res.map((item) => ({ uuid: item.uuid, value: item.realName, label: item.realName })).filter((item) => item.value.indexOf(value) !== -1);
                                    }
                                } else {
                                    state.selectOptions = [];
                                }
                            }}
                            onSelectWithObject
                            onSelect={(info) => {
                                setCurrentPerson(info.uuid, info.value);
                            }}
                        /> */}
                    </Nav.Footer>
                </Nav>
                <Outlet />
            </Content>
        </Layout>
    );
};

export default PlatformLayout;
